<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="shortcut icon" href="#"/>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<link rel="stylesheet" type="text/css" href="style/layout.css" />
<link rel="stylesheet" type="text/css" href="style/xui.css" />
<script src="https://cdn.staticfile.org/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="src/jqdriver.js"></script>
<title>Jq Driver</title>
</head>

<body>

<div class="top top_height app_width hide_ful show_1200">
  <div class="top_btn ll"><button><span></span><span></span><span></span></button></div>
  <div class="top_cen">关于 Jq Driver</div>
  <div class="top_btn lr"><button><span></span><span></span></button></div>
</div>
<div class="top_zw top_height hide_ful show_1200"></div>

<div class="pleft_zw"></div>
<div class="page">
  <div class="page_pr">
    <div class="pleft">
      <ul>
        <li class="on li_explain"><a href="#explain">关于 Jq Driver</a></li>
        <li class="li_hover"><a href="#hover">鼠标经过添加css [jdHover*]</a></li>
        <li class="li_navselect"><a href="#navselect">下拉导航 [jdNavSelect]</a></li>
        <li class="li_poiup"><a href="#poiup">滚动吸附 [jdPoiup]</a></li>
        <li class="li_subCheck"><a href="#subCheck">表单验证 </a></li>
        <li class="li_open"><a href="#open">打开链接</a></li>
        <li class="li_slideto"><a href="#slideto">滚动条定位</a></li>
        <li class="li_select"><a href="#select">获取下拉选中值</a></li>
        <li class="li_cssact"><a href="#cssact">元素css类名操作</a></li>
        <li class="li_onlyum"><a href="#onlyum">只能输入数字</a></li>
        <li class="li_render"><a href="#render">模板数据动态加载</a></li>
        <li class="li_contextmenu"><a href="#contextmenu">右键菜单</a></li>
        <li class="li_tabs"><a href="#tabs">选项卡</a></li>
      </ul>
    </div><!--pleft-->

    <div class="pright">
      <div id="explain" class="maindiv">
        <div class="page_tit">关于 Jq Driver</div>
        <div class="page_con">
          <div class="page_tit2">概述</div>
          <p>Jq Driver 是一款小型网站常用方法的合集、与动态加载加载数据（伪渲染）插件，可实现小型网站快速搭建，尽量减少额外写js代码。整个插件由标签与方法2大部分构成。</p>
          <p>注意：此插件不推荐在大型项目上使用。</p>
          <br />
          <div class="page_tit2">使用方法</div>
          <p>1. 在 jquery.js 后面加载 jqdriver.js</p>
          <p>2. 在 网页最底部 &lt;/body&gt; 前添加代码初始化</p>
          <ul>
            <li><span>&lt;script type="text/javascript"&gt;</span></li>
            <li><span>const jd = $('body').jqdriver({</span></li>
            <li><span>&nbsp;&nbsp;active: 'on',</span></li>
            <li><span>});</span></li>
            <li><span>&lt;/script&gt;</span></li>
          </ul>
          <p>active 为活动 css 类名</p>
          <br />
          <div class="page_tit2">Hello Jq Driver</div>
          <p><a href="hello.html" target="_blank"><u style="color:#08c;">一个最简单的demo实例</u></a></p>

          <br /><br />

          <div class="page_tit2">初始化参数说明</div>
          <div class="page_tit3">Jq Driver 在初始化时，会给予一些常用的参数</div>
          <table class="xtable xfirst">
            <tr>
              <td>对象参数</td>
              <td>说明</td>
            </tr>
            <tr>
              <td>jd.xwidth</td>
              <td>网页可见宽度</td>
            </tr>
            <tr>
              <td>jd.xheight</td>
              <td>网页可见高度</td>
            </tr>
            <tr>
              <td>jd.ios</td>
              <td>是否为苹果客户端</td>
            </tr>
            <tr>
              <td>jd.android</td>
              <td>是否为安卓客户端</td>
            </tr>
            <tr>
              <td>jd.app</td>
              <td>是否为手机端（苹果或安卓的其中一种）</td>
            </tr>
            <tr>
              <td>jd.wechat</td>
              <td>是否为微信端（包含微信小程序）</td>
            </tr>
            <tr>
              <td>jd.wechatPro</td>
              <td>是否为微信小程序端（微信小程序端特有）</td>
            </tr>
            <tr>
              <td>jd.wechatNoPro</td>
              <td>是否为微信端，且不是微信小程序端</td>
            </tr>
          </table>
        </div>
      </div>

      <div id="hover" class="maindiv">
        <div class="page_tit">鼠标经过添加css</div>
        <div class="page_tit2">[jdHover] [jdHoverOn] [jdHoverSon] [jdHoverSonOn]</div>
        <div class="table_row">
          <div class="example">
            <style>
            .hover0 {background-color:#ddd;}
            .hover1_on {background-color:#08c; color:#fff;}
            </style>
            <div class="hover0 hover1" jdHover="this||hover1_on" style="width:200px; height:30px;">给自身加自定义 css 类名</div><br />
            <div class="hover0 hover2" jdHover=".hover1||hover1_on" style="width:200px; height:30px;">给其他元素加自定义 css 类名</div><br />
            <div class="hover0 hover2" jdHoverOn="this||hover1_on" style="width:200px; height:30px;">无移出事件</div><br />

            <div jdL="3" jdLtb="20" jdLtype="dashed"></div>

            <div>给自身加css，兄弟元素去除css</div>
            <div>
              <ul>
                <li class="hover1_on" jdHoverOn="siblings||hover1_on">1</li>
                <li jdHoverOn="siblings||hover1_on">2</li>
                <li jdHoverOn="siblings||hover1_on">3</li>
              </ul>
            </div>

            <div jdL="3" jdLtb="20" jdLtype="dashed"></div>

            <div>给子元素加css，子元素的兄弟元素去除css</div>
            <div jdHoverSon="li||hover1_on">
              <ul>
                <li class="hover1_on">1</li>
                <li>2</li>
                <li>3</li>
              </ul>
            </div>

            <div jdL="3" jdLtb="20" jdLtype="dashed"></div>

            <div>给子元素加css，移出不去除css</div>
            <div jdHoverSonOn="li||hover1_on">
              <ul>
                <li class="hover1_on">1</li>
                <li>2</li>
                <li>3</li>
              </ul>
            </div>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;div class="hover0 hover1" jdHover="this||hover1_on"&gt;给自身加自定义 css 类名&lt;/div&gt;</span></li>
              <li><span>&lt;div class="hover0 hover2" jdHover=".hover1||hover1_on"&gt;给其他元素加自定义 css 类名&lt;/div&gt;</span></li>
              <li><span>&lt;div class="hover0 hover2" jdHoverOn="this||hover1_on"&gt;无移出事件&lt;/div&gt;</span></li>
              <li></li>
              <li><span>&lt;div&gt;给自身加css，兄弟元素去除css&lt;/div&gt;</span></li>
              <li><span>&lt;div&gt;</span></li>
              <li class="level2"><span>&lt;ul&gt;</span></li>
              <li class="level3"><span>  &lt;li class="hover1_on" jdHoverOn="siblings||hover1_on"&gt;1&lt;/li&gt;</span></li>
              <li class="level3"><span>  &lt;li jdHoverOn="siblings||hover1_on"&gt;2&lt;/li&gt;</span></li>
              <li class="level3"><span>  &lt;li jdHoverOn="siblings||hover1_on"&gt;3&lt;/li&gt;</span></li>
              <li class="level2"><span>&lt;/ul&gt;</span></li>
              <li><span>&lt;/div&gt;</span></li>
              <li></li>
              <li><span>&lt;div&gt;给子元素加css，子元素的兄弟元素去除css&lt;/div&gt;</span></li>
              <li><span>&lt;div jdHoverSon="li||hover1_on"&gt;</span></li>
              <li class="level2"><span>&lt;ul&gt;</span></li>
              <li class="level3"><span>  &lt;li class="hover1_on"&gt;1&lt;/li&gt;</span></li>
              <li class="level3"><span>  &lt;li&gt;2&lt;/li&gt;</span></li>
              <li class="level3"><span>  &lt;li&gt;3&lt;/li&gt;</span></li>
              <li class="level2"><span>&lt;/ul&gt;</span></li>
              <li><span>&lt;/div&gt;</span></li>
              <li></li>
              <li><span>&lt;div&gt;给子元素加css，移出不去除css&lt;/div&gt;</span></li>
              <li><span>&lt;div jdHoverSonOn="li||hover1_on"&gt;</span></li>
              <li class="level2"><span>&lt;ul&gt;</span></li>
              <li class="level3"><span>  &lt;li class="hover1_on"&gt;1&lt;/li&gt;</span></li>
              <li class="level3"><span>  &lt;li&gt;2&lt;/li&gt;</span></li>
              <li class="level3"><span>  &lt;li&gt;3&lt;/li&gt;</span></li>
              <li class="level2"><span>&lt;/ul&gt;</span></li>
              <li><span>&lt;/div&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
          <div class="paramax">
            <div class="para xtablein xfirst xtableall">
              <div class="parain">
                <table>
                  <tr>
                    <td width="120">方法</td>
                    <td width="200">说明</td>
                    <td>参数</td>
                  </tr>
                  <tr>
                    <td>jdHover</td>
                    <td>鼠标进入后给<span>自身或其他元素</span>添加 css，鼠标移出后删除 css</td>
                    <td rowspan="2">
                      <p>作用元素||添加的css类名（可选）</p><br />
                      <table>
                        <tr>
                          <td>作用元素</td>
                          <td>效果</td>
                        </tr>
                        <tr>
                          <td>this</td>
                          <td>对自身生效</td>
                        </tr>
                        <tr>
                          <td>siblings</td>
                          <td>对自身生效，且对兄弟元素生效</td>
                        </tr>
                        <tr>
                          <td>[元素选择器]</td>
                          <td>对元素选择器</td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                  <tr>
                    <td>jdHoverOn</td>
                    <td>鼠标进入后给<span>自身或其他元素</span>添加 css，没有移出事件</td>
                  </tr>
                  <tr>
                    <td>jdHoverSon</td>
                    <td>鼠标进入子元素后添加 css，且子元素的兄弟元素删除 css</td>
                    <td rowspan="2">子元素选择器||添加的css类名（可选）</td>
                  </tr>
                  <tr>
                    <td>jdHoverSonOn</td>
                    <td>鼠标进入子元素后添加 css，没有移出事件</td>
                  </tr>
                </table>
              </div>
            </div>
            <div class="para_app">查看参数</div>
          </div>
        </div>
      </div><!--maindiv-->

      <div id="navselect" class="maindiv">
        <div class="page_tit">下拉导航 [jdNavSelect]</div>
        <div class="page_tit3">只需加一个标签即可实现</div>
        <div class="table_row">
          <div class="example">
            <a href="navselect.html" target="_blank"><u style="color:#08c; font-size:14px;">查看demo</u></a>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;div class="nav"&gt;</span></li>
              <li class="level2"><span>&lt;ul class="aclear"&gt;</span></li>
              <li class="level3"><span>  &lt;li&gt;&lt;a href="javascript:void(0)"&gt;首页&lt;/a&gt;&lt;/li&gt;</span></li>
              <li></li>
              <li class="level3"><span>&lt;li <span>jdNavSelect="navselect"</span> <span>jdNavSelectFade="100"</span>&gt;&lt;a href="javascript:void(0)"&gt;人物&lt;/a&gt;</span></li>
              <li class="level4"><span>&lt;div class="<span>navselect</span>"&gt;</span></li>
              <li class="level5"><span>&lt;dl&gt;</span></li>
              <li class="level6"><span>&lt;dd&gt;&lt;a href="javascript:void(0)"&gt;砂糖&lt;/a&gt;&lt;/dd&gt;</span></li>
              <li class="level6"><span>&lt;dd&gt;&lt;a href="javascript:void(0)"&gt;甘雨&lt;/a&gt;&lt;/dd&gt;</span></li>
              <li class="level6"><span>&lt;dd&gt;&lt;a href="javascript:void(0)"&gt;刻晴&lt;/a&gt;&lt;/dd&gt;</span></li>
              <li class="level6"><span>&lt;dd&gt;&lt;a href="javascript:void(0)"&gt;香菱&lt;/a&gt;&lt;/dd&gt;</span></li>
              <li class="level5"><span>&lt;/dl&gt;</span></li>
              <li class="level4"><span>&lt;/div&gt;</span></li>
              <li class="level3"><span>&lt;/li&gt;</span></li>
              <li class="level2"><span>&lt;/ul&gt;</span></li>
              <li><span>&lt;/div&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div>
      </div><!--maindiv-->

      <div id="poiup" class="maindiv">
        <div class="page_tit">滚动吸附 [jdPoiup]</div>
        <div class="page_tit2">当元素滚动到网页顶部时，把他吸附在网页上（不影响其他布局）</div>
        <div class="page_tit3">使用场景：网页下拉时，导航超出屏幕范围时固定网页顶部，实现让导航在顶部一直显示。需与 css 一起配合使用。生效时会添加全局参数 active 的 css 类名</div>
        <div class="table_row">
          <div class="example">
            <a href="poiup.html" target="_blank"><u style="color:#08c; font-size:14px;">查看demo</u></a>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;style&gt;</span></li>
              <li><span>.poi1 {width:100%; background-color:#08c; height:50px; line-height:50px; color:#fff; text-align:center; font-size:16px;}</span></li>
              <li><span>.poi1.on {position:fixed; top:0; left:0; z-index:10;}</span></li>
              <li><span>&lt;/style&gt;</span></li>
              <li><span>&lt;div class="poi1" <span>jdPoiup="0"</span>&gt;向下滚动&lt;/div&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
          <div class="paramax">
            <div class="para xtablein xfirst xtableall">
              <div class="parain">
                <table>
                  <tr>
                    <td width="120">属性</td>
                    <td width="200">说明</td>
                    <td>属性</td>
                  </tr>
                  <tr>
                    <td>jdPoiup</td>
                    <td>顶部生效距离 或 元素选择器</td>
                    <td>[默认:0]当为元素选择器时，生效距离会自动读取元素的高度</td>
                  </tr>
                  <tr>
                    <td>jdPoiBlank</td>
                    <td>是否显示占位</td>
                    <td>[默认:1] [说明:1显示占位, 0不显示占位]</td>
                  </tr>
                  <tr>
                    <td>jdPoiHeight</td>
                    <td>自定义占位高度</td>
                    <td>[默认:无(元素本身高度)]</td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div><!--maindiv-->

      <div id="subCheck" class="maindiv">
        <div class="page_tit">表单验证 jd.subCheck(this)</div>
        <div class="page_tit2">原生弹窗</div>
        <div class="table_row">
          <div class="example">
            <form method="post" action="hello.html" onsubmit="return jd.subCheck(this)">
              <input class="xinput xful" type="text" placeholder="姓名" jdForm="required" jdMsg="姓名不能为空" />
              <div jdH="10"></div>
              <input class="xinput xful" type="text" placeholder="邮箱" jdForm="required||email" jdMsg="邮箱不能为空||邮箱格式错误" />
              <div jdH="10"></div>
              <input class="xinput xful" type="text" placeholder="密码" jdForm="pass1" jdMsg="密码强度不够" />
              <div jdH="10"></div>
              <input class="xinput xful" type="text" placeholder="数字（整数或小数）" jdForm="number" jdMsg="必须输入数字" />
              <div jdH="10"></div>
              <input class="xinput xful" type="text" placeholder="整数" jdForm="int" jdMsg="必须输入整数" />
              <div jdH="10"></div>
              <input class="xinput xful" type="text" placeholder="手机号码" jdForm="mobile" jdMsg="手机号码格式错误" />
              <div jdH="10"></div>
              <label><input type="checkbox" jdForm="required" jdMsg="请先阅读并同意隐私条例" />我已阅读并同意该隐私条例</label>
              <div jdH="10"></div>
              <button class="xbutton xful" type="submit">提交</button>
            </form>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;form method="post" action="hello.html" <span>onsubmit="return jd.subCheck(this)"</span>&gt;</span></li>
              <li class="level2"><span>&lt;input type="text" placeholder="姓名" <span>jdForm="required"</span> jdMsg="姓名不能为空" /&gt;</span></li>
              <li class="level2"></li>
              <li class="level2"><span>&lt;input type="text" placeholder="邮箱" <span>jdForm="required||email"</span> jdMsg="邮箱不能为空||邮箱格式错误" /&gt;</span></li>
              <li class="level2"></li>
              <li class="level2"><span>&lt;input type="text" placeholder="密码" <span>jdForm="pass3"</span> jdMsg="密码强度不够" /&gt;</span></li>
              <li class="level2"></li>
              <li class="level2"><span>&lt;input type="text" placeholder="数字（整数或小数）" <span>jdForm="number"</span> jdMsg="必须输入数字" /&gt;</span></li>
              <li class="level2"></li>
              <li class="level2"><span>&lt;input type="text" placeholder="整数" <span>jdForm="int"</span> jdMsg="必须输入整数" /&gt;</span></li>
              <li class="level2"></li>
              <li class="level2"><span>&lt;input type="text" placeholder="手机号码" <span>jdForm="mobile"</span> jdMsg="手机号码格式错误" /&gt;</span></li>
              <li class="level2"></li>
              <li class="level2"><span>&lt;input type="checkbox" <span>jdForm="required"</span> jdMsg="请先阅读并同意隐私条例" /&gt;</span></li>
              <li class="level2"></li>
              <li class="level2"><span>&lt;button type="submit"&gt;提交&lt;/button&gt;</span></li>
              <li><span>&lt;/form&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->

          <div class="page_note">
            <p><strong>使用方法</strong></p>
            <p>1. &lt;form&gt; 标签 添加 <span>onsubmit="return jd.subCheck(this)"</span></p>
            <p>2. 在需要验证的表单字段添加 <span>jdForm</span> 属性</p>
            <p>3. [可选] <span>jdMsg</span> 填写验证错误文本，多个验证用 <span>||</span> 分隔</p>
            <p>4. 密码为必填项，无需再添加 <span>required</span> 属性</p>
          </div>

          <div class="paramax">
            <div class="para xtablein xfirst xtableall">
              <div class="parain">
                <table>
                  <tr>
                    <td colspan="3">jd.subCheck(this)</td>
                  </tr>
                  <tr>
                    <td width="120">参数</td>
                    <td width="200">说明</td>
                    <td>属性</td>
                  </tr>
                  <tr>
                    <td>jdForm</td>
                    <td>验证方法</td>
                    <td>
                      <p>[必填]</p><br />
                      <table>
                        <tr><td width="120">可选值</td><td>解释</td></tr>
                        <tr><td><span>required</span></td><td>必填</td></tr>
                        <tr><td><span>email</span></td><td>邮箱</td></tr>
                        <tr><td><span>pass1</span></td><td>密码（强度1） 至少6位数</td></tr>
                        <tr><td><span>pass2</span></td><td>密码（强度2） 至少6位数+数字+字母</td></tr>
                        <tr><td><span>pass3</span></td><td>密码（强度3） 至少6位数+数字+字母+至少一位大写字母</td></tr>
                        <tr><td><span>pass4</span></td><td>密码（强度4） 至少6位数+数字+字母+至少一位大写字母+至少一个特殊符号（<span>!@#$%^&*?()+-</span>）</td></tr>
                        <tr><td><span>number</span></td><td>数字（整数或小数）</td></tr>
                        <tr><td><span>int</span></td><td>整数</td></tr>
                        <tr><td><span>mobile</span></td><td>手机号码，以13、14、15、18开头的11位数字</td></tr>
                      </table>
                    </td>
                  </tr>
                  <tr>
                    <td>jdMsg</td>
                    <td>验证文本</td>
                    <td>[可选] [说明：多个验证用<span>||</span>分隔，按照 <span>jdForm</span> 的顺序填写]</td>
                  </tr>
                </table>
              </div>
            </div>
            <div class="para_app">查看参数</div>
          </div>

          <br /><br />

          <div class="page_tit2">使用第三方弹窗插件时，<strong>需要自己封装一个回调函数并传递相应参数，</strong>具体使用方法看例子。</div>
          <div class="page_tit2">第三个参数为验证成功后的回调函数，在表单提交前执行。</div>
          <link rel="stylesheet" type="text/css" href="https://ovsexia.gitee.io/xtiper/css/xtiper.css" />
          <script type="text/javascript" src="https://ovsexia.gitee.io/xtiper/js/xtiper.min.js"></script>
          <div class="table_row">
          <div class="example">
            <div class="page_tit3">使用 Xtiper 弹窗插件</div>
            <form method="post" action="hello.html" onsubmit="return jd.subCheck(this, function(tip){xtip.msg(tip, {icon: 'e'})}, function(){xtip.load()})">
              <input class="xinput xful" type="text" name="username" placeholder="姓名" jdForm="required" jdMsg="姓名不能为空" />
              <div jdH="10"></div>
              <input class="xinput xful" type="text" name="email" placeholder="邮箱" jdForm="required||email" jdMsg="邮箱不能为空||邮箱格式错误" />
              <div jdH="10"></div>
              <button class="xbutton xful" type="submit">提交</button>
            </form>

            <div jdL="3" jdLtb="30" jdLtype="dashed"></div>

            <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/layer/3.3.0/layer.min.js"></script>
            <div class="page_tit3">使用 Layer 弹窗插件</div>
            <form method="post" action="hello.html" onsubmit="return jd.subCheck(this, function(tip){layer.msg(tip, {icon: 2})}, function(){xtip.load()})">
              <input class="xinput xful" type="text" name="username" placeholder="姓名" jdForm="required" jdMsg="姓名不能为空" />
              <div jdH="10"></div>
              <input class="xinput xful" type="text" name="email" placeholder="邮箱" jdForm="required||email" jdMsg="邮箱不能为空||邮箱格式错误" />
              <div jdH="10"></div>
              <button class="xbutton xful" type="submit">提交</button>
            </form>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;form method="post" action="hello.html" onsubmit="return jd.subCheck(this<span>, function(tip){xtip.msg(tip, {icon: 'e'})}, function(){xtip.load()})"&gt;</span></li>
              <li class="level2">...</li>
              <li><span>&lt;/form&gt;</span></li>
              <li></li>
              <li><span>&lt;form method="post" action="hello.html" onsubmit="return jd.subCheck(this<span>, function(tip){layer.msg(tip, {icon: 2})}, function(){xtip.load()})"&gt;</span></li>
              <li class="level2">...</li>
              <li><span>&lt;/form&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div>
      </div><!--maindiv-->

      <div id="open" class="maindiv">
        <div class="page_tit">打开链接 jd.open()</div>
        <div class="page_tit3"></div>
        <div class="table_row">
          <div class="example">
            <button class="xbutton" type="button" onclick="jd.open('hello.html')">打开链接</button>
            <button class="xbutton" type="button" onclick="jd.open('hello.html', 'blank')">在新窗口打开链接</button>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;button type="button" onclick="jd.open('hello.html')"&gt;打开链接&lt;/button&gt;</span></li>
              <li></li>
              <li><span>&lt;button type="button" onclick="jd.open('hello.html', 'blank')"&gt;在新窗口打开链接&lt;/button&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
          <div class="paramax">
            <div class="para xtablein xfirst xtableall">
              <div class="parain">
                <table>
                  <tr>
                    <td colspan="3">jd.open(<em>参数1</em>, <em>参数2</em>)</td>
                  </tr>
                  <tr>
                    <td width="120">参数</td>
                    <td width="200">说明</td>
                    <td>属性</td>
                  </tr>
                  <tr>
                    <td>参数1</td>
                    <td>链接</td>
                    <td>[必填]</td>
                  </tr>
                  <tr>
                    <td>参数2</td>
                    <td>是否在新窗口打开</td>
                    <td>[可选] [默认:空] [blank:在新窗口打开]</td>
                  </tr>
                </table>
              </div>
            </div>
            <div class="para_app">查看参数</div>
          </div>
        </div>
      </div><!--maindiv-->

      <div id="slideto" class="maindiv">
        <div class="page_tit">滚动条定位 jd.slideto()</div>
        <div class="page_tit3"></div>
        <div class="table_row">
          <div class="example">
            <button class="xbutton" type="button" onclick="jd.slideto('body')">滚动到顶部</button>
            <button class="xbutton" type="button" onclick="jd.slideto('#open')">滚动元素</button>
            <button class="xbutton" type="button" onclick="jd.slideto('#open', -50)">滚动元素，并设置位置偏移</button>
            <button class="xbutton" type="button" onclick="jd.slideto('#open', 0, 3000)">设置动画时长</button>
            <button class="xbutton" type="button" onclick="jd.slideto('#open', 0, 0)">无动画</button>
            <button class="xbutton" type="button" onclick="jd.slideto('bodyBottom')">滚动到底部</button>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;button type="button" onclick="jd.slideto('body')"&gt;滚动到顶部&lt;/button&gt;
              </span></li>
              <li><span>&lt;button type="button" onclick="jd.slideto('#wh')"&gt;滚动元素&lt;/button&gt;
              </span></li>
              <li><span>&lt;button type="button" onclick="jd.slideto('#wh', -50)"&gt;滚动元素，并设置位置偏移&lt;/button&gt;
              </span></li>
              <li><span>&lt;button type="button" onclick="jd.slideto('#wh', 0, 3000)"&gt;设置动画时长&lt;/button&gt;
              </span></li>
              <li><span>&lt;button type="button" onclick="jd.slideto('#wh', 0, 0)"&gt;无动画&lt;/button&gt;
              </span></li>
              <li><span>&lt;button type="button" onclick="jd.slideto('bodyBottom', -10, 0)"&gt;滚动到底部&lt;/button&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
          <div class="paramax">
            <div class="para xtablein xfirst xtableall">
              <div class="parain">
                <table>
                  <tr>
                    <td colspan="3">jd.slideto(<em>参数1</em>, <em>参数2</em>, <em>参数3</em>)</td>
                  </tr>
                  <tr>
                    <td width="120">参数</td>
                    <td width="200">说明</td>
                    <td>属性</td>
                  </tr>
                  <tr>
                    <td>参数1</td>
                    <td>元素选择器</td>
                    <td>[必填] [特殊:滚动到底部为 'bodyBottom']</td>
                  </tr>
                  <tr>
                    <td>参数2</td>
                    <td>位置偏移</td>
                    <td>
                      <p>[可选] [默认:0]</p>
                      <p>正数，距离顶部距离更小</p>
                      <p>负数，距离顶部距离更大</p>
                    </td>
                  </tr>
                  <tr>
                    <td>参数3</td>
                    <td>动画时长</td>
                    <td>[可选] [默认:500]</td>
                  </tr>
                </table>
              </div>
            </div>
            <div class="para_app">查看参数</div>
          </div>
        </div>
      </div><!--maindiv-->

      <div id="select" class="maindiv">
        <div class="page_tit">获取下拉选中值 jd.select()</div>
        <div class="page_tit3">弹窗层是使用率最多的弹层类型，具体说明请点击下面按钮</div>
        <div class="table_row">
          <div class="example">
            <select class="xselect" id="select1">
              <option value="1">砂糖</option>
              <option value="2">甘雨</option>
              <option value="3">刻晴</option>
              <option value="4">香菱</option>
            </select>
            <br /><br />
            <button class="xbutton" type="button" onclick="alert(jd.select('select1', 'index'))">获取索引</button>
            <button class="xbutton" type="button" onclick="alert(jd.select('select1', 'value'))">获取value</button>
            <button class="xbutton" type="button" onclick="alert(jd.select('select1', 'html'))">获取内容</button>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;select class="xselect" id="select1"&gt;</span></li>
              <li class="level2"><span>&lt;option value="1"&gt;砂糖&lt;/option&gt;</span></li>
              <li class="level2"><span>&lt;option value="2"&gt;甘雨&lt;/option&gt;</span></li>
              <li class="level2"><span>&lt;option value="3"&gt;刻晴&lt;/option&gt;</span></li>
              <li class="level2"><span>&lt;option value="4"&gt;香菱&lt;/option&gt;</span></li>
              <li><span>&lt;/select&gt;</span></li>
              <li></li>
              <li><span>&lt;button type="button" onclick="alert(jd.select('select1', 'index'))"&gt;获取索引&lt;/button&gt;</span></li>
              <li><span>&lt;button type="button" onclick="alert(jd.select('select1', 'value'))"&gt;获取value&lt;/button&gt;</span></li>
              <li><span>&lt;button type="button" onclick="alert(jd.select('select1', 'html'))"&gt;获取内容&lt;/button&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
          <div class="paramax">
            <div class="para xtablein xfirst xtableall">
              <div class="parain">
                <table>
                  <tr>
                    <td colspan="3">jd.select(<em>参数1</em>, <em>参数2</em>)</td>
                  </tr>
                  <tr>
                    <td width="120">参数</td>
                    <td width="200">说明</td>
                    <td>属性</td>
                  </tr>
                  <tr>
                    <td>参数1</td>
                    <td>id 选择器</td>
                    <td>
                      <p>[必填]</p>
                    </td>
                  </tr>
                  <tr>
                    <td>参数2</td>
                    <td>获取类型</td>
                    <td>
                      <p>[类型:string] [可选]</p><br />
                      <table>
                        <tr><td width="120">可选值</td><td>解释</td></tr>
                        <tr><td><span>index</span></td><td>索引 [默认]</td></tr>
                        <tr><td><span>value</span></td><td>value值</td></tr>
                        <tr><td><span>html</span></td><td>内容</td></tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
            <div class="para_app">查看参数</div>
          </div>
        </div>
      </div><!--maindiv-->

      <div id="cssact" class="maindiv">
        <div class="page_tit">元素css类名操作</div>
        <div class="page_tit2">一共有3个相关方法 <span>jd.cssOn()</span> &nbsp; <span>jd.cssOff()</span> &nbsp; <span>jd.cssSwitch()</span> 默认添加活动 css 类名，支持多个元素</div>
        <div class="table_row">
          <div class="example">
            <style>
            .cssact {background-color:#ddd; width:50px; height:50px;}
            .cssact.on {background-color:#222;}
            .cssact span {display:block; width:20px; height:20px; background-color:#fff; color:blue;}
            </style>
            <div class="cssact cssact1"></div><br />
            <div class="cssact cssact2"></div><br />
            <button class="xbutton" type="button" onclick="jd.cssOn('.cssact, .cssact2')">添加 css 类名</button>
            <button class="xbutton" type="button" onclick="jd.cssOff('.cssact1, .cssact2')">删除 css 类名</button>
            <button class="xbutton" type="button" onclick="jd.cssSwitch('.cssact1, .cssact2')">添加或删除 css 类名</button>
            <button class="xbutton" type="button" onclick="jd.cssOn('.cssact1, .cssact2', {blank: this})">点击网页空白处还原</button>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;button type="button" onclick="jd.cssOn('.cssact1, .cssact2')"&gt;添加 css 类名&lt;/button&gt;</span></li>
              <li><span>&lt;button type="button" onclick="jd.cssOff('.cssact1, .cssact2')"&gt;删除 css 类名&lt;/button&gt;</span></li>
              <li><span>&lt;button type="button" onclick="jd.cssSwitch('.cssact1, .cssact2')"&gt;添加或删除 css 类名&lt;/button&gt;</span></li>
              <li><span>&lt;button type="button" onclick="jd.cssOn('.cssact1, .cssact2', {blank: this})"&gt;点击网页空白处还原&lt;/button&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
          <div class="paramax">
            <div class="para xtablein xfirst xtableall">
              <div class="parain">
                <table>
                  <tr>
                    <td colspan="3">jd.css[On|Off|Switch](<em>参数1</em>, <em>参数2</em>)</td>
                  </tr>
                  <tr>
                    <td width="120">参数</td>
                    <td width="200">说明</td>
                    <td>属性</td>
                  </tr>
                  <tr>
                    <td>参数1</td>
                    <td>元素选择器</td>
                    <td>
                      <p>[必填]</p>
                    </td>
                  </tr>
                  <tr>
                    <td>参数2</td>
                    <td>参数对象</td>
                    <td><p>[类型:object] [可选]</p><br />
                      <table>
                        <tr>
                          <td>键值</td>
                          <td>说明</td>
                        </tr>
                        <tr>
                          <td>cssname</td>
                          <td>添加/删除的 css 类名</td>
                        </tr>
                        <tr>
                          <td>blank</td>
                          <td>点击空白处还原，这里只能填 <span>this</span></td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
            <div class="para_app">查看参数</div>
          </div>
        </div>
      </div><!--maindiv-->

      <div id="onlyum" class="maindiv">
        <div class="page_tit">只能输入数字 jd.onlyNum()</div>
        <div class="page_tit3"></div>
        <div class="table_row">
          <div class="example">
            <input class="xinput" type="text" onkeyup="jd.onlyNum(this)" />
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;input type="text" onkeyup="jd.onlyNum(this)" /&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
        </div>
      </div><!--maindiv-->

      <div id="render" class="maindiv">
        <div class="page_tit">模板数据动态加载 jd.render()</div>
        <div class="page_tit3">一般配合 ajax 使用</div>
        <div class="table_row">
          <div class="example">
            <div class="xtablein xfirst xthead">
              <table id="ullist" class="">
                <thead>
                  <tr>
                    <th>序号</th>
                    <th>图片</th>
                    <th>链接</th>
                    <th>内容</th>
                    <th>输入框</th>
                    <th>表单</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="lilist">
                    <td align="center" jdBind="::id">1</td>
                    <td align="center"><img height="50" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" jdBind="src::picimg" /></td>
                    <td align="center"><a href="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" target="_blank" jdBind="href::picimg">链接</a></td>
                    <td align="center" jdBind="html::subject">百度</td>
                    <td align="center"><input type="text" jdBind="value::subject" value="百度" /></td>
                    <td align="center"><input type="radio" checked="checked" jdBind="checked::check" /> <input type="checkbox" checked="checked" jdBind="checked::check" /></td>
                  </tr>
                </tbody>
              </table>
            </div>
            <br />
            <button class="xbutton" onclick="newdate()">模拟获取新数据</button><br /><br />
            <a href="render.html" target="_blank"><u style="color:#08c; font-size:14px;">更多demo</u></a>
            <script type="text/javascript">
            function newdate()
            {
              //模拟数据
              const demodata = [
                {id: 2, subject: '淘宝', check:true, picimg: 'https://gw.alicdn.com/imgextra/i3/O1CN01uRz3de23mzWofmPYX_!!6000000007299-2-tps-143-59.png'},
                {id: 3, subject: '拼多多', check:false, picimg: 'https://cdn.pinduoduo.com/upload/home/img/common/pdd_logo_v2.png'},
              ]

              jd.render(demodata, '#ullist', '.lilist', 'append');
            }
            </script>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;div class="xtablein xfirst xthead"&gt;</span></li>
              <li class="level2"><span>&lt;table id="ullist"&gt;</span></li>
              <li class="level3"><span>&lt;thead&gt;</span></li>
              <li class="level4"><span>&lt;tr&gt;</span></li>
              <li class="level5"><span>&lt;th&gt;序号&lt;/th&gt;</span></li>
              <li class="level5"><span>&lt;th&gt;图片&lt;/th&gt;</span></li>
              <li class="level5"><span>&lt;th&gt;链接&lt;/th&gt;</span></li>
              <li class="level5"><span>&lt;th&gt;内容&lt;/th&gt;</span></li>
              <li class="level5"><span>&lt;th&gt;输入框&lt;/th&gt;</span></li>
              <li class="level5"><span>&lt;th&gt;单选按钮&lt;/th&gt;</span></li>
              <li class="level4"><span>&lt;/tr&gt;</span></li>
              <li class="level3"><span>&lt;/thead&gt;</span></li>
              <li class="level3"><span>&lt;tbody&gt;</span></li>
              <li class="level4"><span>&lt;tr class="lilist"&gt;</span></li>
              <li class="level5"><span>&lt;td align="center" jdBind="::id"&gt;1&lt;/td&gt;</span></li>
              <li class="level5"><span>&lt;td align="center" jdBind="html::id"&gt;百度&lt;/td&gt;</span></li>
              <li class="level5"><span>&lt;td align="center"&gt;&lt;a href="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" target="_blank" jdBind="href::picimg"&gt;链接&lt;/a&gt;&lt;/td&gt;</span></li>
              <li class="level5"><span>&lt;td align="center"&gt;&lt;img height="50" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" jdBind="src::picimg" /&gt;&lt;/td&gt;</span></li>
              <li class="level5"><span>&lt;td align="center"&gt;&lt;input type="text" jdBind="value::subject" /&gt;&lt;/td&gt;</span></li>
              <li class="level5"><span>&lt;td align="center"&gt;&lt;input type="checkbox" checked="checked" jdBind="checked::check" /&gt;&lt;/td&gt;</span></li>
              <li class="level4"><span>&lt;/tr&gt;</span></li>
              <li class="level3"><span>&lt;/tbody&gt;</span></li>
              <li class="level2"><span>&lt;/table&gt;</span></li>
              <li><span>&lt;/div&gt;</span></li>
              <li><span>&lt;br /&gt;</span></li>
              <li><span>&lt;button class="xbutton" onclick="newdate()"&gt;模拟获取新数据&lt;/button&gt;</span></li>
              <li><span>&lt;script type="text/javascript"&gt;</span></li>
              <li><span>function newdate()</span></li>
              <li><span>{</span></li>
              <li class="level2"><span>//模拟数据</span></li>
              <li class="level2"><span>const demodata = [</span></li>
              <li class="level2"><span>  {id: 2, subject: '淘宝', check:true, picimg: 'https://gw.alicdn.com/imgextra/i3/O1CN01uRz3de23mzWofmPYX_!!6000000007299-2-tps-143-59.png'},</span></li>
              <li class="level2"><span>  {id: 3, subject: '拼多多', check:false, picimg: 'https://cdn.pinduoduo.com/upload/home/img/common/pdd_logo_v2.png'},</span></li>
              <li class="level2"><span>]</span></li>
              <li></li>
              <li class="level2"><span><span>jd.render(demodata, '#ullist', '.lilist', 'append');</span></span></li>
              <li><span>}</span></li>
              <li><span>&lt;/script&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
          <div class="paramax">
            <div class="para xtablein xfirst xtableall">
              <div class="parain">
                <table>
                  <tr>
                    <td colspan="3">jd.render(<em>参数1</em>, <em>参数2</em>, <em>参数3</em>)</td>
                  </tr>
                  <tr>
                    <td width="120">参数</td>
                    <td width="200">说明</td>
                    <td>属性</td>
                  </tr>
                  <tr>
                    <td>参数1</td>
                    <td>父元素容器</td>
                    <td>
                      <p>[必填]</p>
                    </td>
                  </tr>
                  <tr>
                    <td>参数2</td>
                    <td>子元素容器（作为模板）</td>
                    <td>[类型:string] [可选] [说明：需要在首个子元素添加 id 或 class 选择器]</td>
                  </tr>
                  <tr>
                    <td>参数3</td>
                    <td>添加方式</td>
                    <td>
                      <p>[类型:string] [可选]</p><br />
                      <table>
                        <tr><td width="120">可选值</td><td>解释</td></tr>
                        <tr><td><span>append</span></td><td>在尾部添加 [默认]</td></tr>
                        <tr><td><span>prepend</span></td><td>在头部添加</td></tr>
                        <tr><td><span>html</span></td><td>全部替换</td></tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
            <div class="para_app">查看参数</div>
          </div>
        </div>
      </div><!--maindiv-->

      <div id="contextmenu" class="maindiv">
        <div class="page_tit">右键菜单 jd.contextmenu()</div>
        <div class="page_tit3">必须在 <span>$('body').jqdriver();</span> 初始化后添加 jd.contextmenu() 方法，否则需要用 <span>$(document).ready()</span> 方法</div>
        <div class="table_row">
          <div class="example">
            <button class="xbutton contextmenu1">右键点击（默认风格）</button>
            <button class="xbutton contextmenu2">自然风格</button>
            <button class="xbutton contextmenu3">暗色风格</button>
            <script>
            $(document).ready(function(){
              jd.contextmenu('.contextmenu1', [
                {menu: '打开链接', call: function(){this.open('hello.html')}},
                {menu: '自定义函数', call: function(){alert('自定义函数1')}},
                {menu: '禁用的菜单', disabled: true},
                {menu: '关闭'},
              ]);

              jd.contextmenu('.contextmenu2', [
                {menu: '打开链接', call: function(){this.open('hello.html')}},
                {menu: '自定义函数', call: function(){alert('自定义函数2')}},
                {menu: '禁用的菜单', disabled: true},
                {menu: '关闭'},
              ], 'natural');

              jd.contextmenu('.contextmenu3', [
                {menu: '打开链接', call: function(){this.open('hello.html')}},
                {menu: '自定义函数', call: function(){alert('自定义函数3')}},
                {menu: '禁用的菜单', disabled: true},
                {menu: '关闭'},
              ], 'dark');
            });
            </script>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;button class="contextmenu2"&gt;右键点击&lt;/button&gt;</span></li>
              <li><span>&lt;script&gt;</span></li>
              <li><span>$(document).ready(function(){</span></li>
              <li class="level2"><span>jd.contextmenu('.contextmenu2', [</span></li>
              <li class="level3"><span>{menu: '打开链接', call: function(){this.open('hello.html')}},</span></li>
              <li class="level3"><span>{menu: '自定义函数', call: function(){alert('自定义函数')}},</span></li>
              <li class="level3"><span>{menu: '禁用的菜单', disabled: true},</span></li>
              <li class="level3"><span>{menu: '关闭'},</span></li>
              <li class="level2"><span>], 'natural');</span></li>
              <li><span>});</span></li>
              <li><span>&lt;/script&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
          <div class="paramax">
            <div class="para xtablein xfirst xtableall">
              <div class="parain">
                <table>
                  <tr>
                    <td colspan="3">jd.render(<em>参数1</em>, <em>参数2</em>, <em>参数3</em>)</td>
                  </tr>
                  <tr>
                    <td width="120">参数</td>
                    <td width="200">说明</td>
                    <td>属性</td>
                  </tr>
                  <tr>
                    <td>参数1</td>
                    <td>元素选择器</td>
                    <td>
                      <p>[必填]</p>
                    </td>
                  </tr>
                  <tr>
                    <td>参数2</td>
                    <td>菜单数据</td>
                    <td>
                      <p>[必填] [类型:array 嵌套 object]</p>
                      <p>[object.menu: 菜单标题] [object.call: 菜单函数] [object:disabled: 菜单禁用]</p>
                    </td>
                  </tr>
                  <tr>
                    <td>参数3</td>
                    <td>菜单风格</td>
                    <td>
                      <p>[类型:string] [可选]</p><br />
                      <table>
                        <tr><td width="120">可选值</td><td>解释</td></tr>
                        <tr><td><span>[无]</span></td><td>清新风格 [默认]</td></tr>
                        <tr><td><span>natural</span></td><td>自然风格</td></tr>
                        <tr><td><span>dark</span></td><td>暗黑风格</td></tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
            <div class="para_app">查看参数</div>
          </div>
        </div>
      </div><!--maindiv-->

      <div id="tabs" class="maindiv">
        <div class="page_tit">选项卡 jd.tabs()</div>
        <div class="table_row">
          <div class="example">
            <style>
            .tabs_ul li {line-height:30px;}
            .tabs_ul li.on {background-color:#f0f0f0;}
            .tabs_son {display:none;}
            .tabs_son.on {display:block;}
            </style>
            <div>
              <ul class="tabs_ul">
                <li class="on" onclick="jd.tabs(this, '.tabs_con')">1. 点击</li>
                <li onclick="jd.tabs(this, '.tabs_con')">2. 点击</li>
                <li onclick="jd.tabs(this, '.tabs_con')">3. 点击</li>
              </ul>
            </div>

            <div class="tabs_con">
              <div class="tabs_son on">1111</div>
              <div class="tabs_son">2222</div>
              <div class="tabs_son">3333</div>
            </div>
          </div><!--example-->
          <div class="pre">
            <ol>
              <li><span>&lt;style&gt;</span></li>
              <li><span>.tabs_ul li {line-height:30px;}</span></li>
              <li><span>.tabs_ul li.on {background-color:#f0f0f0;}</span></li>
              <li><span>.tabs_son {display:none;}</span></li>
              <li><span>.tabs_son.on {display:block;}</span></li>
              <li><span>&lt;/style&gt;</span></li>
              <li></li>
              <li><span>&lt;div&gt;</span></li>
              <li class="level2"><span>&lt;ul class="tabs_ul"&gt;</span></li>
              <li class="level3"><span>&lt;li class="on" <span>onclick="jd.tabs(this, '.tabs_con')"</span>&gt;1. 点击&lt;/li&gt;</span></li>
              <li class="level3"><span>&lt;li onclick="jd.tabs(this, '.tabs_con')"&gt;2. 点击&lt;/li&gt;</span></li>
              <li class="level3"><span>&lt;li onclick="jd.tabs(this, '.tabs_con')"&gt;3. 点击&lt;/li&gt;</span></li>
              <li class="level2"><span>&lt;/ul&gt;</span></li>
              <li><span>&lt;/div&gt;</span></li>
              <li></li>
              <li><span>&lt;div class="<span>tabs_con</span>"&gt;</span></li>
              <li class="level2"><span>&lt;div class="tabs_son on"&gt;1111&lt;/div&gt;</span></li>
              <li class="level2"><span>&lt;div class="tabs_son"&gt;2222&lt;/div&gt;</span></li>
              <li class="level2"><span>&lt;div class="tabs_son"&gt;3333&lt;/div&gt;</span></li>
              <li><span>&lt;/div&gt;</span></li>
            </ol>
            <div class="precode"></div>
            <div class="preicon">
              <span class="precopy precopy1" title="格式化复制"></span>
              <span class="precopy precopy2" title="复制"></span>
              <span class="pretype" title="暗色调"></span>
            </div><!--precopy-->
          </div><!--pre-->
          <div class="paramax">
            <div class="para xtablein xfirst xtableall">
              <div class="parain">
                <table>
                  <tr>
                    <td colspan="3">jd.render(<em>参数1</em>, <em>参数2</em>)</td>
                  </tr>
                  <tr>
                    <td width="120">参数</td>
                    <td width="200">说明</td>
                    <td>属性</td>
                  </tr>
                  <tr>
                    <td>参数1</td>
                    <td>元素本身</td>
                    <td>
                      <p>[必填]</p>
                    </td>
                  </tr>
                  <tr>
                    <td>参数2</td>
                    <td>作用元素的父元素</td>
                    <td>
                      <p>[说明] [作用元素必须被一个父标签包裹]</p>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
            <div class="para_app">查看参数</div>
          </div>
        </div>
      </div><!--maindiv-->

      <div class="table_row">
        <div class="page_tit3" style="text-align:right;">Jq Driver 网页驱动器</div>
      </div><!--table_row-->
    </div><!--pright-->
  </div><!--page_pr-->
</div><!--page-->

<script type="text/javascript">
const jd = $('body').jqdriver();
</script>
<script>
$(window).scroll(function(){
	saction();
});
function saction()
{
	liarr = new Array("explain","hover","navselect","poiup","subCheck","open","slideto","select","cssact","onlyum","render","contextmenu","tabs");
	d = new Array();
	t = $(window).scrollTop();
	for(i=0;i<liarr.length;i++)
	{
		d[i] = $("#"+liarr[i]).offset().top-100; //提前100像素生效
		if(t>d[i]){
			$(".li_"+liarr[i]).addClass("on").siblings().removeClass("on");
      text = $(".li_"+liarr[i]).find("a").text();
      $(".top_cen").text(text);
		}
	}
}
window.onload=function(){
  bwidth = window.innerWidth;
  if(bwidth>1200){
  	bheight = window.innerHeight-20;
  	pheight = $(".pleft").height();
  	if(bheight<pheight){
      $(".pleft").css({"height":(bheight-20)+'px'});
  	}
  }

  setTimeout(function(){
    $(".pleft").css({"transition-duration":"0.2s"});
  },1);

}

function space(num)
{
  s = ' ';
  str = '';
  for(var i=0;i<num;i++){
    str += s+'';
  }
  return str;
}

//复制代码
$(document).on("click",".precopy",function(){
	pa = $(this).parents(".pre");
	olheight = $(pa).find("ol").height();
	if($(pa).find(".precode").is(":hidden"))
	{
		ol = $(pa).find("ol li");
		$(pa).find(".precode").css({"height":olheight+"px"});
		html = '<textarea class="xtext xful">';
		for(i=0;i<ol.length;i++)
		{
			if($(this).hasClass("precopy2"))
			{
				if($(ol[i]).hasClass("level2")){
          html += space(2);
        }else if($(ol[i]).hasClass("level3")){
          html += space(4);
        }else if($(ol[i]).hasClass("level4")){
          html += space(6);
        }else if($(ol[i]).hasClass("level5")){
          html += space(8);
        }else if($(ol[i]).hasClass("level6")){
          html += space(10);
        }else if($(ol[i]).hasClass("level7")){
          html += space(12);
        }else if($(ol[i]).hasClass("level8")){
          html += space(14);
        }else if($(ol[i]).hasClass("level9")){
          html += space(16);
        }else if($(ol[i]).hasClass("level9")){
          html += space(18);
        }
			}

			if($(ol[i]).find("span").html())
			{
        text = $(ol[i]).find("span").html();
        text = text.replace(/\<\/{0,1}span\>/g,"");  //去除span标签
        text = text.replace("&nbsp;"," ");  //空格
				html += text;
			}

			if(i!=ol.length-1 && $(this).hasClass("precopy2")){
				html += "\n";
			}
		}
		html += '</textarea>';
		$(pa).find(".precode").html(html);
		$(pa).find("ol").hide();
		$(pa).find(".precode").show();
		$(pa).find(".precode textarea").select();
	}
	else
	{
		$(pa).find("ol").show();
		$(pa).find(".precode").hide();
		$(pa).find(".precode").html("");
		$(pa).find(".precode").css({"height":""});
	}
})
$(document).on("blur",".precode textarea",function(){
	$(this).parents(".pre").find("ol").show();
	$(this).parent(".precode").hide();
	$(this).parent(".precode").html("");
})

//代码暗色调
$(document).on("click",".pretype",function(){
	$(this).parents(".pre").toggleClass("on");
})

//app
$(document).on("click",".top_btn.ll",function(){
  $(".pleft").addClass("on");
  $(".pleft_zw").addClass("on");
})

$(document).on("click",".top_btn.lr",function(){
  $("body, html").animate({scrollTop:0},0);
  $(".top_cen").text("关于 Xtiper");
})

$(document).on("click",".pleft_zw, .pleft li a",function(){
  $(".pleft").removeClass("on");
  $(".pleft_zw").removeClass("on");
})

$(document).on("click",".para_app",function(){
  $(this).parent().find(".para").toggle();
  text = $(this).text();
  if(text=='查看参数'){
    text = '收起参数';
  }else{
    text = '查看参数';
  }
  $(this).text(text);
})
</script>

</body>
</html>